import "../../views/users/reg.css"
import { useHistory, } from "react-router-dom"
import { Card, Form, Input, Button, message, } from 'antd';
import { UserOutlined, LockOutlined, PhoneOutlined, HomeOutlined } from '@ant-design/icons';
//引入图标
import imgicon from "../../views/users/IMG/盒马.icon.jfif"
// 引入用户的api
import userApi from "../../api/users"




// eslint-disable-next-line
export default () => {
  let history = useHistory()

  const onFinish = async (values) => {

    const { username, password, iphone } = values
    const  status  = await userApi.reg({ username, password, iphone })

    if (status) {
      message.success({
        content: "注册成功", duration: 1, onClose: () => {
        //   history.push("/")
        }
      })
    } else {
      console.log(status);
      message.error({ content: "注册失败，用户已经存在", duration: 1 })
    }
  }


  return (
    <div className="site-card-border-less-wrapper" id="components-form-demo-normal-reg" style={{
      display: "flex", justifyContent: "center"
    }}>
      <Card bordered={false} style={{ width: 400, marginTop: "15vh" }}>
        {/* 图标 */}
        <Form.Item style={{ margin: "auto", width: 50, marginBottom: 15 }}>
          <Card.Meta
            avatar={
              <img src={imgicon} alt="" style={{ width: 50, height: 50 }} />
            }
          />
        </Form.Item>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入用户名',
              },
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码"
            />
          </Form.Item>
          {/* <Form.Item
            name="home"
            rules={[
              {
                required: true,
                message: '请输入住址',
              },
            ]}
          >
            <Input
              prefix={<HomeOutlined className="site-form-item-icon" />}
              type="text"
              placeholder="请输入住址"
            />
          </Form.Item> */}
          <Form.Item
            name="iphone"
            rules={[
              {
                required: true,
                message: '请输入手机号',
              },
            ]}
          >
            <Input
              prefix={<PhoneOutlined className="site-form-item-icon" />}
              type="text"
              placeholder="请输入手机号"
              maxLength="11"
              addonAfter={<a>获取验证码</a>}
            />
          </Form.Item>
          <Form.Item
            name="Code"
            rules={[
              {
                required: true,
                message: '请输入验证码',
              },
            ]}
          >
            <Input
              type="text"
              placeholder="请输入验证码"
            />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              注册
            </Button>
            <div style={{ height: "20px" }}></div>
            <a href="#/">返回登录</a>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}